import React from 'react';
import { Button, Space } from 'antd';
import '../style.less';
import ModalFactory from './ModalFactory';
import { statusEnum, statusType } from '../type';

const Index = () => {
  const btns: { type: statusType; name: string }[] = [
    {
      type: 'success',
      name: '成功',
    },
    {
      type: 'warn',
      name: '告警',
    },
    {
      type: 'error',
      name: '失败',
    },
  ];
  const handleBtn = (type: statusType) => {
    const modalBoxNode = document.getElementById('modal-box1');
    const Factory = new ModalFactory(modalBoxNode);
    // @ts-ignore
    const modal = Factory.createModal(type);
    switch (statusEnum[type]) {
      case statusEnum.success:
        setTimeout(()=>{
          modal.goTo('https://www.baidu.com');
        }, 1000)
        break;
      case statusEnum.warn:
        modal.log('这是一条告警信息');
        break;
      case statusEnum.error:
        modal.log('这是一条错误信息');
        break;
      default:
        break;
    }
  };

  return (
    <div>
      <h3>需求扩展：</h3>
      <h3>Modal模态框，三种状态有以下功能：</h3>
      <ul>
        <li>成功-点击1s后跳转指定url</li>
        <li>告警-打印告警信息，携带WarnInfo标识</li>
        <li>失败-打印告警信息，携带ErrorInfo标识</li>
      </ul>
      <Space>
        {btns.map((i) => (
          <Button key={i.name} onClick={() => handleBtn(i.type)}>
            {i.name}
          </Button>
        ))}
      </Space>
      <div id="modal-box1"></div>
    </div>
  );
};
export default Index;
